<script setup>
import { onMounted,reactive } from "vue";
import {getDetailData,querySchoolName} from "@/api/echartsData"


onMounted(() => {
  getDetailDataInfo();
});

const dataList = reactive({
  data: []
})

const formData = reactive({
  form: {
    orgName: ""
  },
  neworgCode: "",
  neworgName: ""
})
// 获取字典数据
const querySchoolNameInfo = async (queryStr, cb)=>{
  if (typeof queryStr == "undefined") {
    queryStr = '';
  }
  let result = [];
  const res = await querySchoolName(queryStr)
  if (res.data != null) {
    res.data.map(item=>{
      result.push({value: item})
    })
  } else {
    return null;
  }
  cb(result);
}
// 获取表格数据详情
const getDetailDataInfo = async ()=>{
  const id = 10141
  const params = {
    pageNum: 1,
    pageSize: 10,
    schoolCode: id
  }
  const res = await getDetailData(params)
  console.log(res)
  dataList.data = res.data.list
}
const getCodeAndName=()=> {
  let codeName =formData.form.orgName;
  if (codeName.length > 0) {
    // 判断字符串是否为数字,-,汉字组合
    let zg = /^[0-9]+[-]+[\u4E00-\u9FA5]/;
    if (zg.test(codeName)) {
      let arr = codeName.split("-");
      formData.neworgCode = arr[0];
      formData.neworgName = arr[1];
    } else {
      let reg = /^[0-9]*$/;
      if (reg.test(codeName)) {
        formData.neworgCode = codeName;
        formData.neworgName = '';
      } else {
        formData.neworgName = codeName;
        formData.neworgCode = '';
      }
    }
  } else {
    formData.neworgCode = '';
    formData.neworgName = '';
  }
}
</script>
<template>
  <div class="CrossBeltManager">
    <el-row>
      <el-form :model="formData" :inline="true" label-position="right" label-width="100px">
        <el-form-item label="学校:">
          <el-autocomplete v-model="formData.form.orgName" :fetch-suggestions="querySchoolNameInfo" placeholder="请输入学校代码或名称"
                           @input="getCodeAndName" clearable/>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="queryByName" plain>查询</el-button>
        </el-form-item>
      </el-form>

    </el-row>
    <div class="separatorLine"/>
    <section>
      <el-table :data="dataList.data" highlight-current-row v-loading="loading" @sort-change="sortChange"
                @selection-change="selectChange" ref="table" style="width: 100%;height: auto">
        <el-table-column type="selection" width="50"/>
        <el-table-column type="index" label="序号" align="center"/>
        <el-table-column prop="id" v-if="false"/>
        <el-table-column prop="schoolCode" label="学校代码" align="center"/>
        <el-table-column prop="schoolName" label="学校名称全称" align="center"/>
        <el-table-column prop="province" label="所在省份" align="center"/>
        <el-table-column prop="targetProvince" label="面向省份" align="center"/>
        <el-table-column prop="year" label="年份" align="center"/>
        <el-table-column prop="subject" label="科类" width="150" align="center"/>
        <el-table-column prop="enrollmentBatches" label="招生批次" align="center"/>
        <el-table-column prop="enrollmentMajor" label="招生专业名称" align="center" width="300" show-overflow-tooltip/>
        <el-table-column prop="planEnrollment" label="计划招生" normal="normal" align="center"/>
        <el-table-column prop="academic" label="学制" normal="normal" align="center"/>
        <el-table-column prop="tuition" label="学费" width="150" normal="normal" align="center"/>
        <el-table-column prop="subjectRequirements" label="选科要求（新高考省份）" normal="normal" align="center"/>
      </el-table>
<!--      <div class="page">-->
<!--        <el-row class="toolbar mt-20">-->
<!--          <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"-->
<!--                         :current-page="pageData.pageNo" :page-sizes="[10, 50, 100, 200]" :page-size="pageData.pageSize"-->
<!--                         layout="total, sizes, prev, pager, next, jumper" :total="total">-->
<!--          </el-pagination>-->
<!--        </el-row>-->
<!--      </div>-->
    </section>
    <!-- 删除-->
<!--    <el-dialog :title="deleteDialogName" :visible.sync="deleteDialog" :close-on-click-modal="false" width="300px"-->
<!--               @close="closeDeleteDialog">-->
<!--      <div align="center">-->
<!--        <span style="font-weight: bold;">是否确认删除！！！</span>-->
<!--      </div>-->
<!--      <div slot="footer" class="dialog-footer" align="center">-->
<!--        <el-button type="primary" @click.native="deleteDialogData">是</el-button>-->
<!--        <el-button @click.native="deleteDialog = false">否</el-button>-->
<!--      </div>-->
<!--    </el-dialog>-->
  </div>
</template>
<style lang="scss" scoped>
.CrossBeltManager {
  .title {
    font-weight: 700;
    font-size: 14px;
    padding: 10px;
  }

  .separatorLine {
    position: relative;
    margin-top: 5px;
    margin-bottom: 10px;
    height: 1px;
    background-color: #d4d4d4;
    font-size: 16px;
    color: rgba(101, 101, 101, 1);
  }

  .el-col-3 {
    margin-left: 9px;
    margin-top: 9px;
  }

  li.active {
    color: #000000;
  }

  .el-button.is-plain {
    margin-left: 4%;
  }

  .el-table__expand-icon:after {
    content: '';
    cursor: pointer;
  }

  .el-table__expand-icon > .el-icon {
    display: none !important;
  }

  .el-table__expand-icon --expanded {
    display: none !important;
  }

  .el-table__expand-icon > .el-icon > i {
    display: none !important;
  }

  .el-input--suffix .el-input__inner {
    padding-right: 5px;
  }

  .lights {
    margin-right: 20px;
  }

  .page {
    text-align: center
  }

  .el-pager li.active {
    color: #000000;
    cursor: default;
  }

  .el-pagination {
    white-space: nowrap;
    padding: 2px 5px;
    color: #824C96;
    font-weight: bold;
  }

  .el-button.is-plain {
    margin-left: 1%;
  }

  .flush-right {
    padding-left: 10px;

    .el-input {
      width: 170px;
    }
  }

}
</style>
